<template>
  <el-dialog
    v-el-drag-dialog
    :title="!dataForm.id ? '新增' : '订单详情'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
      <span style="font-size:24px">买家信息:</span>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="买家名称:">
            <span>{{dataForm.trueName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="买家账号:">
            <span>{{dataForm.userName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单编号:">
            <span>{{dataForm.orderId}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付总积分:">
            <span>{{dataForm.totalIntegral}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="赠送总积分:">
            <span>{{dataForm.getIntegral}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单支付积分:">
            <span>{{dataForm.consumeIntegral}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单总价:">
            <span>{{dataForm.total}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="买家类型:">
            <span v-if="this.dataForm.userType == 1">运营商</span>
            <span v-if="this.dataForm.userType == 2">普通联盟店</span>
            <span v-if="this.dataForm.userType == 3">消费者</span>
            <span v-if="this.dataForm.userType == 4">VIP会员</span>
            <span v-if="this.dataForm.userType == 5">中级版联盟店</span>
            <span v-if="this.dataForm.userType == 6">高级版联盟店</span>
            <span v-if="this.dataForm.userType == 7">城市合伙人</span>
            <span v-if="this.dataForm.userType == 8">城市合伙人联盟店</span>
            <!-- <el-select v-model="dataForm.userType" placeholder="买家类型">
              <el-option
              v-for="item in dataForm.userTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              disabled="true">
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" >
        <el-col :span="5">
          <el-form-item label="买家备注:">
            <span>{{dataForm.msg}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="收货人:">
            <span>{{dataForm.person}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="手机号:">
            <span>{{dataForm.phone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址:">
            <span>{{dataForm.address}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="发货时间:">
            <span>{{dataForm.shipTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="用户确认收货时间:">
            <span>{{dataForm.returnShipTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付时间:">
            <span>{{dataForm.payTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付流水号:">
            <span>{{dataForm.outOrderId}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="快递公司:">
            <span>{{dataForm.companyName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="物流编号:">
            <span>{{dataForm.shipCode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单状态:">
            <span v-if="this.dataForm.orderStatus == 0">已取消</span>
            <span v-if="this.dataForm.orderStatus == 10">未支付</span>
            <span v-if="this.dataForm.orderStatus == 20">待发货</span>
            <span v-if="this.dataForm.orderStatus == 30">已发货</span>
            <span v-if="this.dataForm.orderStatus == 40">已收货</span>
            <span v-if="this.dataForm.orderStatus == 50">已完成</span>
            <span v-if="this.dataForm.orderStatus == 100">已删除</span>
            <!-- <el-select v-model="dataForm.orderStatus" placeholder="订单状态">
              <el-option
              v-for="item in dataForm.orderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              disabled="true">
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付方式:">
            <span>{{dataForm.payName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="支付编号:">
            <span>{{dataForm.invoice}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <span style="font-size:24px">商品信息:</span>
      <el-table v-if="this.dataForm.list.length !== 0"
            :data="this.dataForm.list"
            border
            style="width: 100%">
            <el-table-column
              prop="img"
              label="商品图">
              <template slot-scope="scope">
                <el-popover
                  placement="right"
                  trigger="hover">
                  <img :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.img" style="max-height: 100px;"/>
                  <img slot="reference" :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.img" style="max-height: 50px;max-width: 130px">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名">
              <template slot-scope="scope">
                <a :href="'http://www.yilianbaihui.cn/item_show.html?goodsId=' + scope.row.goodsId">{{scope.row.goodsName}}</a>
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="address"
              label="价格类型">
              <template slot-scope="scope">
                {{scope.row.address === 1 ?'兑换商城':'福利商城'}}
              </template>
            </el-table-column> -->
            <el-table-column
              prop="goodsSerial"
              label="型号">
            </el-table-column>
            <el-table-column
              prop="specInfo"
              label="规格">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价">
            </el-table-column>
            <el-table-column
              prop="count"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="shipPrice"
              label="价格">
              <template slot-scope="scope">
                <span v-if="dataForm.priceType === 1">{{scope.row.shipPrice}}(运费)+{{scope.row.integral}}(积分)</span>
                <span v-if="dataForm.priceType === 2">{{scope.row.shipPrice}}(运费)+{{scope.row.price}}(售价)</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="logisticsCompany"
              label="快递公司">
            </el-table-column>
            <el-table-column
              prop="deliveryNo"
              label="快递单号">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="物流">
              <template slot-scope="scope">
                <el-button type="primary" @click="queryExpress(scope.row.deliveryNo)">物流</el-button>
              </template>
            </el-table-column>
          </el-table>
      <br/>
      <span style="font-size:24px">订单状态:</span>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-table :data="dataForm.expressList">
        <el-table-column label="时间">
          <template slot-scope="scope">
            <span>{{scope.row.acceptTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="物流记录">
          <template slot-scope="scope">
            <span>{{scope.row.acceptStation}}</span>
          </template>
        </el-table-column>
      </el-table>
        </el-col>
        <el-col :span="10">
          <el-form-item label="售后状态">
            <ul v-if="this.dataForm.returnStatus != null || this.dataForm.returnType != null">
              <li>申请退货时间：{{this.dataForm.applyReturnTime}}</li>
              <li>申请退货状态：{{this.dataForm.returnStatus === 1 ? '已申请' : (this.dataForm.returnStatus === 2 ? '审核通过' : (this.dataForm.returnStatus === 3 ? '退货中/退款中/换货中' : (this.dataForm.returnStatus === 4 ? '退货成功' : (this.dataForm.returnStatus === 5 ? '审核未通过' : (this.dataForm.returnStatus === 6 ? '退货失败' : (this.dataForm.returnStatus === 7 ? '已撤销' : ''))))))}}</li>
              <li>申请退货类型：{{this.dataForm.returnType === 1 ? '仅退款' : (this.dataForm.returnType === 2 ? '退货并退款' : (this.dataForm.returnType === 3 ? '换货' : ''))}}</li>
            </ul>
            <span v-if="this.dataForm.returnStatus == null && this.dataForm.returnType == null"><br/>暂无申请售后信息</span>
          </el-form-item>
        </el-col>
      </el-row>
    <!-- <el-form-item label="买家名称" prop="trueName">
      <el-input v-model="dataForm.trueName" placeholder="买家名称"></el-input>
    </el-form-item>
    <el-form-item label="买家账号" prop="userName">
      <el-input v-model="dataForm.userName" placeholder="买家账号"></el-input>
    </el-form-item>
    <el-form-item label="订单编号" prop="orderId">
      <el-input v-model="dataForm.orderId" placeholder="订单编号"></el-input>
    </el-form-item>
    <el-form-item label="订单总现金券" prop="totalIntegral">
      <el-input v-model="dataForm.totalIntegral" placeholder="订单总现金券"></el-input>
    </el-form-item>
    <el-form-item label="订单赠送积分" prop="getIntegral">
      <el-input v-model="dataForm.getIntegral" placeholder="订单赠送积分"></el-input>
    </el-form-item>
    <el-form-item label="订单消耗积分" prop="consumeIntegral">
      <el-input v-model="dataForm.consumeIntegral" placeholder="订单消耗积分"></el-input>
    </el-form-item>
    <el-form-item label="订单总价" prop="total">
      <el-input v-model="dataForm.total" placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="买家类型" prop="userType">
      <el-select v-model="dataForm.userType" placeholder="买家类型">
          <el-option
            v-for="item in dataForm.userTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            disabled="true">
          </el-option>
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="买家备注" prop="msg">
      <el-input v-model="dataForm.msg" placeholder="买家备注"></el-input>
    </el-form-item>
    <el-form-item label="收货人" prop="person">
      <el-input v-model="dataForm.person" placeholder="收货人"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="dataForm.phone" placeholder="手机号"></el-input>
    </el-form-item>
    <el-form-item label="详细地址" prop="address">
      <el-input v-model="dataForm.address" placeholder="详细地址"></el-input>
    </el-form-item>
    <el-form-item label="支付时间" prop="payTime">
      <el-input v-model="dataForm.payTime" placeholder="支付时间"></el-input>
    </el-form-item>
    <el-form-item label="支付流水号" prop="outOrderId">
      <el-input v-model="dataForm.outOrderId" placeholder="支付流水号"></el-input>
    </el-form-item>
    <el-form-item label="快递公司" prop="companyName">
      <el-input v-model="dataForm.companyName" placeholder="快递公司"></el-input>
    </el-form-item>
    <el-form-item label="物流编号" prop="shipCode">
      <el-input v-model="dataForm.shipCode" placeholder="物流编号"></el-input>
    </el-form-item>
    <el-form-item label="订单状态" prop="orderStatus">
      <el-select v-model="dataForm.orderStatus" placeholder="订单状态">
          <el-option
            v-for="item in dataForm.orderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            disabled="true">
          </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="支付方式" prop="payName">
      <el-input v-model="dataForm.payName" placeholder="支付方式"></el-input>
    </el-form-item> -->
    </el-form>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          trueName: '',
          userName: '',
          orderId: '',
          totalIntegral: '',
          totalprice: '',
          userType: '',
          msg: '',
          person: '',
          phone: '',
          address: '',
          payTime: '',
          outOrderId: '',
          companyName: '',
          shipCode: '',
          orderStatus: '',
          payName: '',
          total: '',
          consumeIntegral: '',
          getIntegral: '',
          shipTime: '',
          returnShipTime: '',
          applyReturnTime: '',
          list: [],
          returnType: '',
          returnStatus: '',
          invoice: '',
          priceType: '',
          userTypeOptions: [{
            value: 0,
            label: '未知'
          }, {
            value: 1,
            label: '区域运营商'
          }, {
            value: 2,
            label: '普通联盟店'
          }, {
            value: 3,
            label: '消费者'
          }, {
            value: 4,
            label: 'VIP会员'
          }, {
            value: 5,
            label: '中级版联盟店'
          }, {
            value: 6,
            label: '高级版联盟店'
          }, {
            value: 7,
            label: '城市合伙人'
          }, {
            value: 8,
            label: '城市合伙人联盟店'
          }],
          orderStatusOptions: [{
            value: 0,
            label: '已取消订单'
          }, {
            value: 10,
            label: '未支付'
          }, {
            value: 20,
            label: '已支付'
          }, {
            value: 30,
            label: '已发货'
          }, {
            value: 40,
            label: '已收货'
          }, {
            value: 50,
            label: '已完成'
          }]
        },
        dataRule: {}
      }
    },
    methods: {
      init (id) {
        debugger
        this.dataForm.id = id || 0
        this.dataForm.priceType = 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            debugger
            this.$http({
              url: this.$http.adornUrl(`/shopping/order/getOrderById/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.trueName = data.data.trueName
                this.dataForm.userName = data.data.userName
                this.dataForm.orderId = data.data.orderId
                if (data.data.priceType === 1) {
                  this.dataForm.totalIntegral = data.data.totalIntegral
                } else if (data.data.priceType === 2) {
                  this.dataForm.totalIntegral = 0
                }
                this.dataForm.totalprice = data.data.totalprice
                debugger
                if (data.data.priceType === 1) {
                  this.dataForm.total = data.data.totalIntegral + '(积分)+' + data.data.totalPrice + '(现金)'
                } else if (data.data.priceType === 2) {
                  this.dataForm.total = data.data.totalPrice + '(现金)'
                }
                this.dataForm.userType = data.data.userType
                this.dataForm.msg = data.data.msg
                this.dataForm.person = data.data.person
                this.dataForm.phone = data.data.phone
                this.dataForm.address = data.data.address
                this.dataForm.payTime = data.data.payTime
                this.dataForm.outOrderId = data.data.outOrderId
                this.dataForm.companyName = data.data.companyName
                this.dataForm.shipCode = data.data.shipCode
                this.dataForm.orderStatus = data.data.orderStatus
                this.dataForm.payName = data.data.payName
                this.dataForm.consumeIntegral = data.data.consumeIntegral
                if (data.data.priceType === 1) {
                  this.dataForm.getIntegral = 0
                } else if (data.data.priceType === 2) {
                  this.dataForm.getIntegral = data.data.totalIntegral
                }
                // this.dataForm.getIntegral = data.data.getIntegral
                this.dataForm.shipTime = data.data.shipTime
                this.dataForm.returnShipTime = data.data.returnShipTime
                this.dataForm.returnStatus = data.data.returnStatus
                this.dataForm.returnType = data.data.returnType
                this.dataForm.applyReturnTime = data.data.applyReturnTime
                this.dataForm.list = data.data.list
                this.dataForm.invoice = data.data.invoice
                this.dataForm.priceType = data.data.priceType
              }
            })
            this.$http({
              url: this.$http.adornUrl(`/shopping/order/getLogisticsInformationByExpressNo/${this.dataForm.shipCode}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.expressList = data.data
              }
            })
          }
        })
      },
      queryExpress (expressNo) {
        this.$http({
          url: this.$http.adornUrl(`/shopping/order/getLogisticsInformationByExpressNo/${expressNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.expressList = data.data.list
          }
        })
      }
    }
  }
</script>
